﻿@page "/Flipper"

@using FluentUI.Demo.Shared.Pages.Flipper.Examples;

<PageTitle>@App.PageTitle("Flipper")</PageTitle>

<h1>Flipper</h1>

<p>
    The flipper component is most often used to page through blocks of content or collections of ui elements. As flippers are often a supplemental
    form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of
    <code>aria-hidden="false"</code> will expose the flippers to assistive technology.
</p>
<p>
    <code>&lt;FluentFlipper&gt;</code> wraps the <code>&lt;fluent-flipper&gt;</code> element, a web component implementation of a flipper leveraging the Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="General usage" Component="@typeof(FlipperDefault)"></DemoSection>

<DemoSection Title="Flipper with custom icons" Component="@typeof(FlipperCustomIcons)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentFlipper)" />
